<template>
  <div>
    <span v-for="(item, index) in datalist" :key="index"
      ><i
        :class="
          item.status == '0'
            ? 'back-blue '
            : '' || item.status == '1'
            ? 'back-red'
            : '' || item.status == '2'
            ? 'back-ccc '
            : ''
        "
        >{{ item.nodeName }}</i
      >{{ item.dayu }}</span
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      datalist: [
        {
          nodeName: "领导小组成立",
          status: 1,
          dayu: "＞＞＞",
        },
        {
          nodeName: "信息报告",
          status: 0,
          dayu: "＞＞＞",
        },
        {
          nodeName: "应急处置",
          status: 2,
          dayu: "＞＞＞",
        },
        {
          nodeName: "应急响应结束",
          status: 1,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
span {
  display: inline-block;
  color: black;
  i {
    display: inline-block;
    font-style: normal;
    padding: 0 5px 0 5px;
    color: #ffffff;
    font-size: 12px;
    border-radius: 5px;
  }
}
.back-blue {
  background: #005fb8;
}
.back-red {
  background: #167c40;
}
.back-ccc {
  background: #ccc;
}
</style>